<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8"/>
	<title>淘宝网 - 淘！我喜欢</title>
	<link rel="stylesheet" href="css/index.css"/>
	<link rel="icon" href="favicon.ico"/>
	<!--图标-->
	<!--<base href="#" target="_blank"/>-->
	<!--设置基础url-->
</head>

<body>
	<!--头部信息-->
	<div id="headMessage" class="layer clearfix">
		<ul class="fl">
			<li><span>中国大陆</span><span class="iconfont arrow">&#xe6cc;</span></li>
			<li class="mr7"><a href="#" class="login mr7">亲，请登录</a><a href="#">免费注册</a></li>
			<li><a href="#">手机逛淘宝</a></li>
		</ul>
		<ul class="fr">
			<li><a href="#">我的淘宝</a><span class="iconfont arrow">&#xe6cc;</span></li>
			<li><span class="iconfont mr5 c4">&#xe613;</span><a href="#">购物车</a><strong>0</strong><span class="iconfont arrow">&#xe6cc;</span></li>
			<li><a href="#"><span class="iconfont mr5 store">&#xe61d;</span>收藏夹</a><span class="iconfont arrow">&#xe6cc;</span></li>
			<li><a href="#">商品分类</a></li>
			<li class="line">|</li>
			<li><a href="#">千牛卖家中心</a><span class="iconfont arrow">&#xe6cc;</span></li>
			<li><a href="#">联系客服</a><span class="iconfont arrow">&#xe6cc;</span></li>
			<li><span class="iconfont mr5 c4">&#xe790;</span><a href="#">网站导航</a><span class="iconfont arrow">&#xe6cc;</span></li>
		</ul>
	</div>
	
	<!--头部广告-->
	<div id="headAd">
		<div class="layer clearfix">
			<a href="#" class="fl go"><img src="images/go.png" alt=""></a>
			<ul class="fr">
				<li class="item1">
					<a href="#" class="fr"><img src="images/adimg_01.jpg" alt=""></a>
					<h3><a href="#">电视会场</a></h3>
					<p><a href="#">最高降价2000</a></p>
				</li>
				<li class="item2">
					<a href="#" class="fr"><img src="images/adimg_02.jpg" alt=""></a>
					<h3><a href="#">电视会场</a></h3>
					<p><a href="#">最高降价2000</a></p>
				</li>
				<li class="item3">
					<a href="#" class="fr"><img src="images/adimg_03.jpg" alt=""></a>
					<h3><a href="#">电视会场</a></h3>
					<p><a href="#">最高降价2000</a></p>
				</li>
				<li class="item4">
					<a href="#" class="fr"><img src="images/adimg_04.jpg" alt=""></a>
					<h3><a href="#">电视会场</a></h3>
					<p><a href="#">最高降价2000</a></p>
				</li>
				<li class="item5">
					<a href="#" class="fr"><img src="images/adimg_05.jpg" alt=""></a>
					<h3><a href="#">电视会场</a></h3>
					<p><a href="#">最高降价2000</a></p>
				</li>
			</ul>
		</div>
	</div>
	
	<!--头部搜索-->
	<div id="headSearch">
		<div class="clearfix layer">
			<!--<h1><a href="#"><img src="images/logo.png" alt="淘宝网"></a></h1>-->
			<h1 class="fl"><a href="#">淘宝网</a></h1>
			<div class="code fr">
				<span class="iconfont close">&#xe60f;</span> <span class="c5">手机淘宝</span> <img src="images/code.png" alt="">
			</div>
			<div class="search">
				<ul class="searchTab clearfix">
					<li class="active">宝贝</li>
					<li>天猫</li>
					<li>店铺</li>
				</ul>
				<div class="searchContent clearfix">
					<form action="">
						<div class="searchBox fl">
							<input type="text">
							<div class="placeholder">
								<i class="iconfont">&#xe650;</i> <span>网红裤腰带 洋气 国际范 9.9包邮</span>
							</div>
							<span class="iconfont imgSearch">&#xe6ba;</span>
						</div>
						<div class="fl">
							<button type="submit">搜索</button>
						</div>
					</form>
				</div>
				<div class="hotKey">
					<a href="#" class="c5">积木</a> <a href="#">积木</a> <a href="#" class="c5">积木</a> <a href="#">积木</a> <a href="#">积木</a> <a href="#" class="c5">积木</a> <a href="#">积木</a> <a href="#">积木</a> <a href="#">积木</a> <a href="#">积木</a> <a href="#">积木</a> <a href="#">积木</a> <a href="#">办公桌</a>
				</div>
			</div>
		</div>
	</div>
	
	<!--导航-->
	<div id="nav" class="layer clearfix">
		<h2 class="fl">主题市场</h2>
		<ul>
			<li class="size"><a href="#">天猫</a></li>
			<li class="size"><a href="#">聚划算</a></li>
			<li class="size"><a href="#">天猫超市</a></li>
			<li class="line">|</li>
			<li><a href="#">淘抢购</a></li>
			<li><a href="#">电器城</a></li>
			<li><a href="#">司法拍卖</a></li>
			<li><a href="#">淘宝心选</a></li>
			<li><a href="#">兴农扶贫</a></li>
			<li class="line">|</li>
			<li><a href="#">飞猪旅行</a></li>
			<li><a href="#">智能生活</a></li>
			<li><a href="#">苏宁易购</a></li>
		</ul>
	</div>
	
	<!--首屏内容-->
	<div id="firstScreen" class="layer clearfix">
		<!--左侧-->
		<div class="firstLeft fl">
			<!--侧边导航-->
			<div class="sideNav fl">
				<ul>
					<li>
						<a href="#">女装</a> / <a href="#">内衣</a> / <a href="#">家居</a><span class="iconfont fr">&#xe678;</span>
					</li>
					<li>
						<a href="#">女装</a> / <a href="#">内衣</a> / <a href="#">家居</a><span class="iconfont fr">&#xe678;</span>
					</li>
					<li>
						<a href="#">女装</a> / <a href="#">内衣</a> / <a href="#">家居</a><span class="iconfont fr">&#xe678;</span>
					</li>
				</ul>
			</div>
			<!--图片1容器-->
			<div class="img1Box fr">
				<div class="pic fl">
					<div class="img">
						<a href="#"><img src="images/pic_01.jpg" alt=""></a>
					</div>
					<button class="iconfont leftBtn">&#xe62d;</button>
					<button class="iconfont rightBtn">&#xe678;</button>
					<div class="circle">
						<span class="active"></span><span></span><span></span><span></span><span></span>
					</div>
				</div>
				<div class="ad fr">
					<a href="#"><img src="images/ad_01.jpg" alt=""></a>
				</div>
			</div>
			<!--图片2容器-->
			<div class="img2Box fr">
				<div class="pic fl">
					<div class="picTitle">
						<div class="text clearfix">
							<span class="fl bg">理想生活上天猫</span> <span class="fr"><i>1</i>/6</span>
						</div>
						<div class="line">
							<span></span>
						</div>
					</div>
					<div class="img">
						<a href="#"><img src="images/pic_02.jpg" alt=""></a> <a href="#"><img src="images/pic_02.jpg" alt=""></a>
					</div>
					<button class="iconfont leftBtn">&#xe62d;</button>
					<button class="iconfont rightBtn">&#xe678;</button>
				</div>
				<div class="ad fr">
					<p class="title">今日特卖</p>
					<a href="#"><img src="images/pic_03.jpg" alt=""></a>
				</div>
			</div>
			<!--淘宝头条-->
			<div class="news fl">
				<div class="hd fl">
					<h3>淘宝头条</h3>
					<p>让你的生活更有趣</p>
				</div>
				<div class="newList fr">
					<div class="item">
						<a href="#" class="fl img"><img src="images/news_img_01.jpg" alt=""></a>
						<h4><a href="#">微漫酱访谈第三期</a></h4>
						<p><a href="#">哈喽,大家好</a></p>
						<a href="#" class="more">更多></a>
					</div>
				</div>
			</div>
		</div>
		<!--右侧-->
		<div class="firstRight fr">
			<!--用户-->
			<div class="user">
				<a href="#" class="avatar"><img src="images/avatar.jpg" alt=""></a>
				<p class="userName">Hi! 你好</p>
				<p class="members">
					<a href="#" class="gold">领淘金币抵钱</a> <a href="#" class="club">会员俱乐部</a>
				</p>
				<div class="btn">
					<button class="login">登录</button>
					<button class="register">注册</button>
					<button class="shop">开店</button>
				</div>
			</div>
			<!--举报-->
			<a href="#" class="tipOff"> <span>网络有害信息举报专区</span><i class="iconfont">&#xe501;</i> </a>
			<!--公告区-->
			<div class="notice">
				<ul class="title">
					<li class="active"><a href="#">公告</a></li>
					<li><a href="#">规则</a></li>
					<li><a href="#">论坛</a></li>
					<li><a href="#">安全</a></li>
					<li><a href="#">公益</a></li>
				</ul>
				<ul class="content clearfix active">
					<li class="item1"><a href="#">热点2021年淘宝11.11招商规则热点2021年淘宝</a></li>
					<li><a href="#">热点40多页聊天记录</a></li>
					<li><a href="#">宝妈客服让客户变闺蜜</a></li>
				</ul>
			</div>
			<!--图标-->
			<table class="icon">
				<tr>
					<td class="item1">
						<a href="#"><span></span><i>充话费</i> </a>
					</td>
					<td class="item2">
						<a href="#"><span></span><i>充费</i> </a>
					</td>
					<td class="item3">
						<a href="#"><span></span><i>充费</i> </a>
					</td>
					<td class="item4">
						<a href="#"><span></span><i>充话费</i> </a>
					</td>
				</tr>
				<tr>
					<td class="item5">
						<a href="#"><span></span><i>充费</i> </a>
					</td>
					<td class="item6">
						<a href="#"><span></span><i>充费</i> </a>
					</td>
					<td class="item7">
						<a href="#"><span></span><i>充话费</i> </a>
					</td>
					<td class="item8">
						<a href="#"><span></span><i>充费</i> </a>
					</td>
				</tr>
				<tr>
					<td class="item9">
						<a href="#"><span></span><i>充费</i> </a>
					</td>
					<td class="item10">
						<a href="#"><span></span><i>充话费</i> </a>
					</td>
					<td class="item11">
						<a href="#"><span></span><i>充费</i> </a>
					</td>
					<td class="item12">
						<a href="#"><span></span><i>充费</i> </a>
					</td>
				</tr>
			</table>
			<!--App-->
			<div class="app">
				<div class="title clearfix">
					<h3 class="fl">阿里APP</h3>
					<a href="#" class="fr">更多></a>
				</div>
				<ul class="appIcon">
					<li><a href="#"><img src="images/app_01.webp" alt=""></a></li>
					<li><a href="#"><img src="images/app_02.png" alt=""></a></li>
					<li><a href="#"><img src="images/app_03.png" alt=""></a></li>
					<li><a href="#"><img src="images/app_04.png" alt=""></a></li>
					<li><a href="#"><img src="images/app_05.png" alt=""></a></li>
					<li><a href="#"><img src="images/app_06.png" alt=""></a></li>
					<li><a href="#"><img src="images/app_07.jpg" alt=""></a></li>
					<li><a href="#"><img src="images/app_08.png" alt=""></a></li>
					<li><a href="#"><img src="images/app_09.png" alt=""></a></li>
					<li><a href="#"><img src="images/app_010.png" alt=""></a></li>
				</ul>
			</div>
		</div>
	</div>
	
	<!--有好货与爱逛街-->
	<div class="layer clearfix mt10">
		<!--有好货-->
		<div class="goods fl">
			<div class="head clearfix">
				<h3 class="fl">
					<img src="images/goods.png" alt="有好货"> <span class="iconfont">&#xe642;</span> <i>与品质生活不期而遇</i>
				</h3>
				<a href="#" class="fr change">换一换</a>
			</div>
			<ul class="list">
				<li>
					<a href="#"><img src="images/shop_img_01.jpg" alt=""></a>
					<h4><a href="#">同车同伴车载头枕腰靠</a></h4>
					<p class="text"><a href="#">一路行车，如果是不适相伴</a></p>
					<a href="#" class="comment"> <span class="iconfont">&#xe688;</span><i>5950 人说好</i> </a>
				</li>
				<li>
					<a href="#"><img src="images/shop_img_01.jpg" alt=""></a>
					<h4><a href="#">同车同伴车载头枕腰靠</a></h4>
					<p class="text"><a href="#">一路行车，如果是不适相伴</a></p>
					<a href="#" class="comment"> <span class="iconfont">&#xe688;</span><i>5950 人说好</i> </a>
				</li>
				<li>
					<a href="#"><img src="images/shop_img_01.jpg" alt=""></a>
					<h4><a href="#">同车同伴车载头枕腰靠</a></h4>
					<p class="text"><a href="#">一路行车，如果是不适相伴</a></p>
					<a href="#" class="comment"> <span class="iconfont">&#xe688;</span><i>5950 人说好</i> </a>
				</li>
				<li>
					<a href="#"><img src="images/shop_img_01.jpg" alt=""></a>
					<h4><a href="#">同车同伴车载头枕腰靠</a></h4>
					<p class="text"><a href="#">一路行车，如果是不适相伴</a></p>
					<a href="#" class="comment"> <span class="iconfont">&#xe688;</span><i>5950 人说好</i> </a>
				</li>
				<li>
					<a href="#"><img src="images/shop_img_01.jpg" alt=""></a>
					<h4><a href="#">同车同伴车载头枕腰靠</a></h4>
					<p class="text"><a href="#">一路行车，如果是不适相伴</a></p>
					<a href="#" class="comment"> <span class="iconfont">&#xe688;</span><i>5950 人说好</i> </a>
				</li>
				<li>
					<a href="#"><img src="images/shop_img_01.jpg" alt=""></a>
					<h4><a href="#">同车同伴车载头枕腰靠</a></h4>
					<p class="text"><a href="#">一路行车，如果是不适相伴</a></p>
					<a href="#" class="comment"> <span class="iconfont">&#xe688;</span><i>5950 人说好</i> </a>
				</li>
			</ul>
		</div>
		<!--爱逛街-->
		<div class="goods fr shopping">
			<div class="head clearfix">
				<h3 class="fl">
					<img src="images/goods.png" alt="有好货"> <span class="iconfont">&#xe642;</span> <i>与品质生活不期而遇</i>
				</h3>
				<a href="#" class="fr change">换一换</a>
			</div>
			<ul class="list">
				<li>
					<a href="#"><img src="images/shop_img_01.jpg" alt=""></a>
					<p class="text">
						<span class="iconfont">&#xe61e;</span>
						<a href="#">一路行车，如果是不适相伴一路行车，如果是不适相伴一路行车，如果是不适相伴</a>
					</p>
					<a href="#" class="comment"> <span><img src="images/small_avatar.png" alt=""></span><i>爱逛***01</i> </a>
				</li>
				<li>
					<a href="#"><img src="images/shop_img_01.jpg" alt=""></a>
					<p class="text">
						<span class="iconfont">&#xe61e;</span>
						<a href="#">一路行车，如果是不适相伴一路行车，如果是不适相伴一路行车，如果是不适相伴</a>
					</p>
					<a href="#" class="comment"> <span><img src="images/small_avatar.png" alt=""></span><i>爱逛***01</i> </a>
				</li>
				<li>
					<a href="#"><img src="images/shop_img_01.jpg" alt=""></a>
					<p class="text">
						<span class="iconfont">&#xe61e;</span> <a href="#">一路行车，如果是不适相伴一路行车，如果是不适相伴</a>
					</p>
					<a href="#" class="comment"> <span><img src="images/small_avatar.png" alt=""></span><i>爱逛***01</i> </a>
				</li>
				<li>
					<a href="#"><img src="images/shop_img_01.jpg" alt=""></a>
					<p class="text">
						<span class="iconfont">&#xe61e;</span>
						<a href="#">一路行车，如果是不适相伴一路行车，如果是不适相伴</a>
					</p>
					<a href="#" class="comment"> <span><img src="images/small_avatar.png" alt=""></span><i>爱逛***01</i> </a>
				</li>
				<li>
					<a href="#"><img src="images/shop_img_01.jpg" alt=""></a>
					<p class="text">
						<span class="iconfont">&#xe61e;</span> <a href="#">一路行车，如果是不适相伴一路行车，如果是不适相伴</a>
					</p>
					<a href="#" class="comment"> <span><img src="images/small_avatar.png" alt=""></span><i>爱逛***01</i> </a>
				</li>
				<li>
					<a href="#"><img src="images/shop_img_01.jpg" alt=""></a>
					<p class="text">
						<span class="iconfont">&#xe61e;</span> <a href="#">一路行车，如果是不适相伴一路行车，如果是不适相伴</a>
					</p>
					<a href="#" class="comment"> <span><img src="images/small_avatar.png" alt=""></span><i>爱逛***01</i> </a>
				</li>
			</ul>
		</div>
	</div>
	
	<!--右侧侧边固定导航栏-->
	<div id="tool">
		<span class="iconfont">&#xe605;</span>
		<div class="btn">
			<a href="#" class="c4 active">爱逛 好货</a>
			<a href="#" class="c5">爱逛 好货</a>
			<a href="#" class="c6">爱逛 好货</a>
			<a href="#" class="c7">爱逛 好货</a>
			<a href="#" class="c4">爱逛 好货</a>
			<a href="#" class="item6">爱逛</a>
			<a href="#" class="">爱逛 好货</a>
		</div>
	</div>
</body>
</html>
